<template>
    <div class="login">
      <div class="wrap clearfix">
        <form-wrap :title="title">
          <div slot="form">
            <i-Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <FormItem label="UserN" prop="username" :label-width="80" class="input-item">
                <i-Input v-model="formValidate.username" placeholder="Enter your Usern"></i-Input>
              </FormItem>

              <FormItem label="Password" prop="password" :label-width="80" class="input-item">
                <i-Input type="password" v-model="formValidate.password" placeholder="Enter your Password"></i-Input>
              </FormItem>

              <div class="fast-click input-item">
                没有账号？？
                <router-link class="link" to="/register">
                  立即注册
                </router-link>
              </div>

              <FormItem class="button-wrap">
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
              </FormItem>
            </i-Form>
          </div>
        </form-wrap>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import formWrap from 'base/form-wrap/form-wrap'
    import axios from 'axios'
    import {ERR_OK} from 'api/config'
    import USERSERVER from 'api/user'

    export default {
      data() {
        return {
          title: '用户登陆',
          formValidate: {
            username: '',
            password: ''
          },
          ruleValidate: {
            username: [
              { required: true, message: '用户不能为空', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' },
            ]
          }
        }
      },
      created() {

      },
      methods: {
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            let formData = this.formValidate
            if (valid) {
              USERSERVER.login({username: formData.username, password: formData.password}).then(res => {
                if (res.code === ERR_OK) {
                  this.$Message.success('登陆成功！！2秒后跳转')
                } else {
                  this.$Message.error(res.msg)
                }
              })
            } else {

              this.$Message.error('失败！！请检查你的输入')

            }
          })
        },
        handleReset (name) {
          this.$refs[name].resetFields();
        }
      },
      components: {
        formWrap
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .input-item
    padding-right: 40px
  .fast-click
    hh(20px)
    margin-bottom: 10px
    text-align: right
    .link
      sc($font-medium, $vice-color)
      &:hover
        text-decoration: underline
  .button-wrap
    padding-top: 10px
    text-align: center
</style>
